<!DOCTYPE html>
<html>

<head>
	<title>简易的围棋</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.staticfile.net/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.staticfile.net/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
	<!--link href="static/bootstrap.min.css" rel="stylesheet">
	<script src="static/bootstrap.bundle.min.js"></script>
	<script src="static/jquery.min.js"></script-->
	<script src="static/tf.min.js"></script>
</head>

<body>

	<script src="static/simplego.js"> </script>
	<script src="static/tfgo.js"> </script>
	<style>
		body {
			background-color: MidnightBlue;
		}

		.simplego {
			width: 600px;
			height: 600px;
			background-color: Tan;
			background-image: url(static/weiqipan.png);
			background-repeat: no-repeat;
			display: grid;
			grid-template-rows: repeat(19, 30px);
			padding: 15px;
			margin: auto;
		}

		.sg-row {
			display: grid;
			grid-template-columns: repeat(19, 30px);
		}

		.sg-item {
			text-align: center;
			height: 26px;
			color: #00FF00;
			margin: 2px;
		}

		.sg-item:hover {
			background-color: rgba(0, 0, 255, 0.5);
		}

		.EMPTY {
			background-color: "";
			opacity: 1;
			border: 0;
		}

		.B {
			background-color: black;
			opacity: 0.8;
			border: 0;
		}

		.W {
			background-color: white;
			opacity: 0.8;
			border: 0;
		}

		.lastgo {
			border: 3px solid red;
		}
	</style>
	<nav class="navbar navbar-expand-md bg-dark navbar-dark">
		<!-- Brand -->
		<div id="c_bg_color" class="btn-group" style="background-color: MidnightBlue;">
			<button type="button" class="navbar-brand btn dropdown-toggle" data-bs-toggle="dropdown">
				简易的围棋
			</button>
			<div class="dropdown-menu" style="max-height: 300px;overflow: auto;"></div>
		</div>
		<script>
			for (var c in list_of_bg_color) {
				color = list_of_bg_color[c];
				$("#c_bg_color div").append('<a class="dropdown-item btn" onclick="c_bg_color_f(this)">' + color + '</a >');
				$("#c_bg_color div a:last-child").css("background-color", color);
			}
			function c_bg_color_f(e) {
				$("body").css("background-color", $(e).text());
				$("#c_bg_color").css("background-color", $(e).text());
			}
		</script>
		<!-- Toggler/collapsibe Button -->
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
	</nav>
	<div class="container-fluid">
		<span class="row mt-3">
			<span class="col"></span>
			<div class="col-6">
				<div class="row">
					<span class="col btn-group-vertical">
						<button type="button" class="btn btn-primary" onclick="playFun(this)">悔棋</button>
						<button type="button" class="btn btn-primary" onclick="playFun(this)">新开局</button>
						<button type="button" class="btn btn-primary" onclick="playFun(this)">下载棋谱记录</button>
					</span>
					<simplego class="col simplego"></simplego>
					<script>
						for (var sg_row in simplego.positions) {
							$("simplego").append('<span class="sg-row"></span>');
							for (var sg_col in simplego.positions) {
								title = simplego.positions[sg_row] + simplego.positions[sg_col];
								$("simplego span:last-child").append('<a title="' + title + '" class= "sg-item btn EMPTY" onclick="playFun(this)"></a>')
							}
						}
						var go_player = "B";
						function playFun(e) {
							switch ($(e).text()) {
								case "悔棋": case "新开局": case "下载棋谱记录":
									go_main($(e).text());
									status_bar.push($(e).text());
									break;
								default:
									if ($(e).hasClass('EMPTY')) {
										var gl_len = simplego_Handle2.goList.length;
										simplego_Handle2.handle([go_player + "[" + $(e).attr("title") + "]"]);
										if (gl_len != simplego_Handle2.goList.length) {
											quick_browsing = simplego_Handle2.goList.length - 1;
											status_bar.push(go_player + "[" + $(e).attr("title") + "]");
											change_color(simplego_Handle2.parent);
											change_player();
											sg_factory.main();
										}
									}
							}
						}
						function change_color(parent) {
							$("#quick-browsing input").attr("max", simplego_Handle2.goList.length - 1);
							$("#quick-browsing input").val(quick_browsing);
							$("#quick-browsing span:eq(1)").text(quick_browsing);
							$("simplego span").each(function () {
								$(this).children("a").each(function () {
									if (parent.hasOwnProperty($(this).attr("title"))) {
										$(this).removeClass("EMPTY");
										$(this).addClass(parent[$(this).attr("title")]);
										if ($(this).attr("title") == simplego_Handle2.goList.at(quick_browsing).slice(2, 4)) {
											$(this).addClass("border border-3 border-danger");
										} else {
											$(this).removeClass("border border-3 border-danger");
										}
									} else {
										$(this).removeClass(simplego.colors);
										$(this).addClass("EMPTY");
										$(this).removeClass("border border-3 border-danger");
									}
								})
							})
						}
						function change_player() {
							var playing_index = simplego.colors.indexOf(go_player);
							if (playing_index >= simplego.colors.length - 1) {
								go_player = simplego.colors[0];
							} else {
								go_player = simplego.colors[playing_index + 1]
							}
						}
					</script>
					<span class="col btn-group-vertical">
						<button type="button" class="btn btn-primary" onclick="modelUpload()">上传模型</button>
						<button type="button" class="btn btn-primary" onclick="modelDownloads()">下载模型</button>
						<div class="btn-group">
							<button type="button" class="btn btn-primary dropdown-toggle"
								data-bs-toggle="dropdown">模型功能</button>
							<ul class="dropdown-menu">
								<li class="form-check form-switch">
									<input class="form-check-input" type="checkbox" onclick="testcheck(this)"
										title="训练全部" unchecked>
									<label class="form-check-label" for="mySwitch">训练全部</label>
								</li>
								<li class="form-check form-switch">
									<input class="form-check-input" type="checkbox" onclick="testcheck(this)"
										title="训练最后局面" checked>
									<label class="form-check-label" for="mySwitch">训练最后局面</label>
								</li>
								<li class="form-check form-switch">
									<input class="form-check-input" type="checkbox" onclick="testcheck(this)" title="预测"
										checked>
									<label class="form-check-label" for="mySwitch">预测</label>
								</li>
							</ul>
							<script>
								function testcheck(e) {
									switch ($(e).attr("title")) {
										case "训练全部":
											if ($(e).is(':checked')) {
												sg_factory.sg_factory["sw_model_fit_all"] = new model_fit_all(sg_factory.simplego_model);
											} else {
												delete sg_factory.sg_factory["sw_model_fit_all"];
											}
											break;
										case "训练最后局面":
											if ($(e).is(':checked')) {
												sg_factory.sg_factory["sw_model_fit_last"] = new model_fit_last(sg_factory.simplego_model);
											} else {
												delete sg_factory.sg_factory["sw_model_fit_last"];
											}
											break;
										case "预测":
											if ($(e).is(':checked')) {
												sg_factory.sg_factory["sw_model_predict"] = new model_predict(sg_factory.simplego_model);
											} else {
												delete sg_factory.sg_factory["sw_model_predict"];
											}
											break;
									}
									for (var run in sg_factory.sg_factory) {
										console.log(run);
										//sg_factory.sg_factory[run].main();
									}
								}
							</script>
						</div>
						<button type="button" class="btn btn-primary"></button>
					</span>
				</div>
			</div>
			<span class="col"></span>
		</span>
		<div class="row">
			<span class="col"></span>
			<span class="col-6">
				<div class="input-group mt-3">
					<textarea id="status_bar" class="form-control" rows="1" readonly></textarea>
					<script>
						var status_bar = ["游戏健康忠告：请注意休息，合理安排游戏时间。"];
					</script>
					<span id="show_time" class="input-group-text"></span>
				</div>
				<div class="input-group mt-3">
					<span class="input-group-text">棋谱</span>
					<input type="file" class="form-control bg-primary" title="棋谱" onchange="handleFileUpload(event)">
					<span class="input-group-text">模型</span>
					<input id="json-upload" type="file" class="form-control bg-primary" title="模型">
					<span class="input-group-text">权重</span>
					<input id="weights-upload" type="file" class="form-control bg-primary" title="权重">
				</div>
				<script>
					function handleFileUpload(event) {
						if (confirm("上传棋谱将覆盖现有数据，确定吗？")) {
							const file = event.target.files[0];
							if (file) {
								const reader = new FileReader();
								reader.onload = (e) => {
									try {
										simplego_Handle1 = new extract_go_manual();
										simplego_Handle2 = new Filter_Criteria();
										simplego_Handle1.next = simplego_Handle2;
										simplego_Handle1.handle(e.target.result);
										quick_browsing = simplego_Handle2.goList.length - 1;
										change_color(simplego_Handle2.parent);
										status_bar = status_bar.concat(simplego_Handle2.goList);
										sg_factory.sg_factory["sw_model_fit_all"] = new model_fit_all(sg_factory.simplego_model);
										delete sg_factory.sg_factory["sw_model_fit_last"];
										sg_factory.main();
										delete sg_factory.sg_factory["sw_model_fit_all"];
										sg_factory.sg_factory["sw_model_fit_last"] = new model_fit_last(sg_factory.simplego_model);
										//model_create();
									} catch (error) {
										console.error("无法解析JSON文件:", error);
									}
								};
								reader.onerror = (e) => {
									console.error("读取文件时出错:", e);
								};
								reader.readAsText(file);
							}
						}
					}
				</script>
				<div id="quick-browsing" class="input-group mt-3" title="速览">
					<span class="input-group-text btn btn-primary" onclick="quick_browsing_f(this)">《</span>
					<span class="input-group-text" style="width: 55px;">0</span>
					<input type="range" class="form-control" min="0" max="0" value="0"
						onchange="quick_browsing_f(this)">
					<span class="input-group-text btn btn-primary" onclick="quick_browsing_f(this)">》</span>
				</div>
				<script>
					var quick_browsing = 0;
					function quick_browsing_f(e) {
						switch (e.tagName.toLowerCase()) {
							case "span":
								if ($(e).text() == "《") {
									if (quick_browsing > 0) { quick_browsing--; }
								} else if ($(e).text() == "》") {
									if ($("#quick-browsing input").attr("max") > quick_browsing) { quick_browsing++; }
								}
								$("#quick-browsing input").val(quick_browsing);
								break;
							case "input":
								quick_browsing = $(e).val();
								break;
						}
						$("#quick-browsing span:eq(1)").text(quick_browsing);
						change_color(simplego_Handle2.list_of_parent[quick_browsing]);
					}
				</script>
			</span>
			<span class="col"></span>
		</div>
		<div class="row mt-3">
			<span class="col"></span>
			<span class="col-6">
				<div id="cruise-control" class="input-group">
					<span class="input-group-text btn btn-primary" onclick="cruise_control_f(this)">定速复盘</span>
					<span class="input-group-text" style="width: 55px;">2</span>
					<input type="range" class="form-control" min="1" max="20" value="2"
						onchange="cruise_control_f(this)">
				</div>
				<script>
					var cruise_control = 2;
					var cruise_control_switch = false;
					function cruise_control_f(e) {
						switch (e.tagName.toLowerCase()) {
							case "span":
								if (cruise_control_switch) {
									cruise_control_switch = false
								} else {
									cruise_control_switch = true;
									cruise_control_run();
								}
								$("#cruise-control span:eq(0)").toggleClass("btn-primary");
								$("#cruise-control span:eq(0)").toggleClass("btn-info");
								break;
							case "input":
								cruise_control = $(e).val();
								break;
						}
						$("#cruise-control span:eq(1)").text(cruise_control);
						console.log(cruise_control_switch, cruise_control, $("#cruise-control input").val());
					}
					function cruise_control_run() {
						if (simplego_Handle2.goList.length - 1 > quick_browsing && cruise_control_switch) {
							quick_browsing++;
							$("#quick-browsing span:eq(1)").text(quick_browsing);
							change_color(simplego_Handle2.list_of_parent[quick_browsing]);
						} else {
							cruise_control_switch = false;
							$("#cruise-control span:eq(0)").removeClass("btn-info");
							$("#cruise-control span:eq(0)").addClass("btn-primary");
						}
						if (cruise_control_switch) {
							setTimeout("cruise_control_run()", 1000 * cruise_control);
						}
					}
				</script>
			</span>
			<span class="col"></span>
		</div>
	</div>
	<script>
		var show_time = 0;
		var show_time_alert = false;
		function show_time_f() {
			const now = new Date();
			const minutes = now.getMinutes();
			show_time += 5;
			$("#show_time").text("计时 " + show_time + " 秒。" + go_player);
			if (minutes === 0 || minutes === 30) {
				if (show_time_alert) {
					status_bar.push("游戏健康忠告：请注意休息，合理安排游戏时间。");
					show_time_alert = false;
					alert("游戏健康忠告：请注意休息，合理安排游戏时间。");
				}
			} else {
				show_time_alert = true;
			}
			$("#status_bar").val(status_bar.join("\n"));
			var textArea = document.getElementById('status_bar');
			textArea.scrollTop = textArea.scrollHeight;
			setTimeout("show_time_f()", 5000);
		}
		show_time_f();
	</script>
</body>

</html>